@import 'variables.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Spotlight 全局基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.disable-transitions *,
.disable-transitions *::before,
.disable-transitions *::after {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

[x-cloak] {
    display: none;
}

:root {
    --transition-duration: 200ms;
}


::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}
::view-transition-new(root) {
    z-index: 999;
}

@supports (view-transition: inherit) {
    .dark-mode-transition {
        view-transition-name: root;
    }
}

@supports not (view-transition: inherit) {
    * {
        transition: background-color var(--transition-duration) ease,
                    border-color var(--transition-duration) ease,
                    color var(--transition-duration) ease;
    }
}

/* 使用变量的示例 */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

@layer components {
    .btn-primary {
        @apply bg-orange-600 text-white hover:bg-orange-500 focus:ring-orange-500;
    }
    
    .btn-secondary {
        @apply bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
    }
    
    .form-input:focus, .form-select:focus, .form-textarea:focus {
        @apply border-orange-500 ring-orange-500;
    }
    
    .form-checkbox:checked, .form-radio:checked {
        @apply bg-orange-600 border-orange-600;
    }
}

/* 修改默认链接颜色 */
a {
    @apply text-orange-600 hover:text-orange-700;
}

/* 修改选中文本的颜色 */
::selection {
    @apply bg-orange-200 text-orange-900;
}
